<template>
	<view class="main">
		<u-navbar :is-back="true" :title="i18n.navbar.store" :background="background" :border-bottom="false"
			title-color="#000000" back-icon-color="#000">

		</u-navbar>
		<view class="all">
			<view class="info">
				<view class="title">
					{{i18n.store_info.head}}
				</view>
				<view class="head_img">
					<text>90*90 px</text>
					<image @click="upimg(0)" v-if="headimg==''" src="../../../static/images/upimg.png" mode=""></image>
					<image @click="upimg(0)" v-if="headimg!=''" :src="headimg" mode=""></image>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.store_info.background}}
				</view>
				<view class="head_img">
					<text>375*180 px</text>
					<image @click="upimg(1)" v-if="back==''" src="../../../static/images/upimg.png" mode="">
					</image>
					<image @click="upimg(1)" v-if="back!=''" :src="back" mode=""></image>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.store_info.streetimg}}
				</view>
				<view class="head_img">
					<text>355*78 px</text>
					<image @click="upimg(2)" v-if="streetbackground==''" src="../../../static/images/upimg.png" mode="">
					</image>
					<image @click="upimg(2)" v-if="streetbackground!=''" :src="streetbackground" mode=""></image>
				</view>
			</view>
			<view class="info2">
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.address}}
					</view>
					<input type="text" v-model="shopinfo.address" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.Introduction}}
					</view>
					<input type="text" v-model="shopinfo.intro" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.keywords}}

					</view>
					<input type="text" v-model="shopinfo.keywords" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.phone}}
					</view>
					<input type="number" maxlength="11" v-model="shopinfo.phone" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.stock}}
					</view>
					<view class="stock">
						<image src="../../../static/images/jian.png" mode="" @click="changes(1)"></image>
						<input type="number" v-model="shopinfo.alertStock" />
						<image src="../../../static/images/jia.png" mode="" @click="changes(2)"></image>
					</view>
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.serve_method}}
					</view>
					<view class="service_method" @click="showmodel">
						<text>{{shopinfo.serviceType}}</text>
						<image src="../../../static/images/right.png" mode=""></image>
					</view>
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.H5_link}}
					</view>
					<input type="number" v-model="shopinfo.serviceLink" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.serve_phone}}
					</view>
					<input type="number" v-model="shopinfo.servicePhone" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.Message}}
					</view>
					<input type="number" v-model="shopinfo.serviceMessage" />
				</view>
				<view class="store_info">
					<view class="store_tit">
						{{i18n.store_info.email}}
					</view>
					<input type="number" v-model="shopinfo.serviceEmail" />
				</view>
			</view>
			<view class="bank">
				<text>{{i18n.store_info.type}}</text>
				<view class="bank_r">
					<image src="../../../static/images/bank.png" mode=""></image>
					<text>{{shopinfo.transferType=='bank'?'银行卡':''}}</text>
				</view>
			</view>
			<view class="info">
				<view class="title">
					{{i18n.store_info.name}}
				</view>
				<input class="cont" type="number" v-model="shopinfo.transferName" />
			</view>
			<view class="info">
				<view class="title">
					{{i18n.store_info.bank}}
				</view>
				<input class="cont" type="number" v-model="shopinfo.transferBank" />
			</view>
			<view class="info">
				<view class="title">
					{{i18n.store_info.bankid}}
				</view>
				<input class="cont" type="number" v-model="shopinfo.transferBankCard" />
			</view>
		</view>
		<view class="button" @click="subchanges">
			{{i18n.store_info.submit}}
		</view>
		<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff',
				},
				count: 5, //评分个数
				value: 2,
				checked: false,
				headimg: '',
				back: '',
				streetbackground: '',
				shopinfo: '',
				show: false,
				
				list: [{
						value: '1',
						label: 'H5-H5链接'
					},
					{
						value: '2',
						label: 'phone-电话'
					},
					{
						value: '3',
						label: 'message-Message'
					},
					{
						value: '4',
						label: 'email-邮箱'
					}
				]
			}
		},
		computed: {
			i18n() {
				return this.$t('message')
			},
		},
		onShow() {
			this.lang()
		},
		onLoad() {
			this.getconfiginfo()
		},
		methods: {
			changes(value){
			
				if(value==1){
					if(this.shopinfo.alertStock<=1){
						uni.showToast({
							title:'境界库存不可小于1',
							icon:'none',
							duration:500
						})
					}else{
						this.shopinfo.alertStock=this.shopinfo.alertStock-1
					}
				}else{
					this.shopinfo.alertStock=this.shopinfo.alertStock+1
				}
				
			},
			showmodel() {
				this.show = true
			},
			confirm(e){
				console.log(e);
				this.shopinfo.serviceType=e[0].label
			},
			getconfiginfo() {
				global.$http.request({
					url: '/api/admin/merchant/config/info',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					method: 'GET',
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.shopinfo = res.data.data
						this.headimg=this.shopinfo.avatar
						this.back=this.shopinfo.backImage
						this.streetbackground=this.shopinfo.streetBackImage
					}
				})
			},
			//上传图片
			upimg(index) {
				var that = this
				uni.chooseImage({
					count: 5,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/admin/merchant/upload/image', {
							params: {
								model: 'user',
								pid: '0'
							},
							/* 会加在url上 */
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'multipart', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							console.log(index);
							console.log(res.data.data.url);
							// headimg:'',
							// background:'',
							// streetbackground:'',
							if (index == 0) {
								this.headimg = res.data.data.url
							} else if (index == 1) {
								this.back = res.data.data.url
								console.log('商户背景图', this.back);
							} else if (index == 2) {
								this.streetbackground = res.data.data.url
							}

						})
					}
				});
			},
			subchanges(){
				// 
				global.$http.request({
					url: '/api/admin/merchant/config/info/edit',
					header: {
						'Authori-zation': uni.getStorageSync('token') //自定义请求头信息
					},
					data:{
						avatar:this.headimg,
						backImage:this.back,
						streetBackImage:this.streetbackground,
						address:this.shopinfo.avatar,
						intro:this.shopinfo.intro,
						keywords:this.shopinfo.keywords,
						phone:this.shopinfo.phone,
						alertStock:this.shopinfo.alertStock,
						serviceType:this.shopinfo.serviceType,
						serviceLink:this.shopinfo.serviceLink,
						servicePhone:this.shopinfo.servicePhone,
						serviceMessage:this.shopinfo.serviceMessage,
						serviceEmail:this.shopinfo.serviceEmail,
						transferName:this.shopinfo.transferName,
						transferBank:this.shopinfo.transferBank,
						transferType:this.shopinfo.transferType,
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						uni.showToast({
							title:res.data.message,
							icon:'none',
							duration:500
						})
						setTimeout(function(){
							this.getconfiginfo()
						},500)
					}
				})
			},
			lang() {
				this._i18n.locale = uni.getStorageSync('select')
			},
		}
	}
</script>

<style lang="scss">
	page {
		font-family: PingFang SC;
		background-color: #f7f7f7;

		.main {


			.all {
				margin-top: 10rpx;

				.info {
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 31rpx 22rpx;
					margin-bottom: 2rpx;

					.title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.head_img {
						display: flex;
						align-items: center;

						image {
							width: 110rpx;
							height: 110rpx;
						}

						text {
							padding-right: 33rpx;
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.cont {
						text-align: right;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #808080;
					}
				}

				.info2 {
					margin-top: 10rpx;

					.store_info {
						background-color: #fff;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 31rpx 22rpx;
						margin-bottom: 2rpx;
					}

					input {
						text-align: right;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}

					.store_tit {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #000000;
					}

					.service_method {
						display: flex;
						align-items: center;

						text {
							padding-right: 23rpx;
						}

						image {
							width: 8rpx;
							height: 12rpx;
						}
					}

					.stock {
						width: 220rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						input {
							width: 100rpx;
							text-align: center;
						}

						image {
							width: 42rpx;
							height: 42rpx;
						}

						text {
							font-size: 28rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #FF0000;
						}
					}

					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}

				.bank {
					padding: 31rpx 22rpx;
					display: flex;
					justify-content: space-between;

					text {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #1594FF;
					}

					.bank_r {

						display: flex;
						align-items: center;

						text {
							padding-left: 19rpx;
						}

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

				}
			}

			.button {
				margin-top: 84rpx;
				width: 750rpx;
				height: 98rpx;
				text-align: center;
				line-height: 98rpx;
				background: #304156;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
